<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="postForm"
      label-position="right"
      label-width="100px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          id="oldPassword"
          :key="passwordType"
          ref="password"
          v-model="postForm.oldPassword"
          :type="passwordType"
          placeholder="请输入原密码"
          name="password"
          tabindex="2"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          id="password"
          :key="passwordType"
          ref="password"
          v-model="postForm.password"
          :type="passwordType"
          placeholder="请输入新密码"
          name="password"
          tabindex="2"
          autocomplete="on"
          style="margin-top: 10px"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="rePassword" >
        <el-input
          id="rePassword"
          :key="passwordType"
          ref="password"
          v-model="postForm.rePassword"
          :type="passwordType"
          placeholder="再次输入新密码"
          name="password"
          tabindex="2"
          autocomplete="on"
          style="margin-top: 10px"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-if="!isEdit" v-waves @click="$router.back()">返回</el-button>
        <el-button v-waves type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { uppwd } from '@/api/system/user'
import { getUserId, getUser } from '@/utils/auth'
import waves from '@/directive/waves' // waves directive

const defaultForm = {
  oldPassword: null,
  password: null,
  rePassword: null,
  id: getUserId(),
  username: getUser()
}

export default {
  name: 'UserDetail',
  directives: { waves },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('新密码不能为空'))
      } else {
        let ruleStr = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#\$%])(?=.*\d)[\s\S]{8,16}$/;
        if (!ruleStr.test(value)) {
          callback(new Error('密码需包含数字,大、小写字母,及特殊符号!@#$%中的一个或多个,长度8-18位'))
        } else {
          callback()
        }
      }
    }
    const validateRePassword = (rule, value, callback) => {
      const passwd = document.getElementById('password').value
      if (!value) {
        callback(new Error('新密码不能为空'))
      } else {
        if (value !== passwd) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      loading: true,
      postForm: Object.assign({}, defaultForm),
      passwordType: 'password',
      rules: {
        oldPassword: [{ required: true, message: '原密码不能为空', trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        rePassword: [{ required: true, trigger: 'blur', validator: validateRePassword }]
      }
    }
  },
  methods: {
    checkCapslock({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
          this.capsTooltip = true
        } else {
          this.capsTooltip = false
        }
      }
      if (key === 'CapsLock' && this.capsTooltip === true) {
        this.capsTooltip = false
      }
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          uppwd(this.postForm).then(response => {
            const returnCode = response && response.returnCode
            if (this.Const.OK === returnCode) {
              this.$message({
                type: 'success',
                message: '密码修改成功'
              })
              this.$emit('closeFlag', false)
              this.$router.push(`/`)
            } else {
              this.$message({
                type: 'error',
                message: response && response.msg || '密码修改失败'
              })
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '密码修改失败'
            })
          })
        }
      })
    }
  }
}

</script>
<style scoped>

</style>
